<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP 开源网店系统参数</title>
    <!-- Import style -->
    <link rel="stylesheet" href="../../static/vendor/element-plus@2.3.6/dist/index.css" />
    <link rel="stylesheet" href="../../static/vendor/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
    <!-- Import Vue 3 -->
    <script src="../../static/vendor/vue@3.3.4/dist/vue.global.prod.js"></script>
    <!-- Import component library -->
    <script src="../../static/vendor/element-plus@2.3.6/dist/index.full.min.js"></script>
</head>

<body>
    <div id="app" class="contanier">
        <div>
            <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="(item,idx) of products" :label="item.name">{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column :prop="item.name" :label="item.name" width="180" v-for="(item,idx) of products"
                    :key="idx">
                    <template #default="scope">
                        <div v-html="scope.row[item.name]"></div>
                    </template>

                </el-table-column>
            </el-table>
        </div>
    </div>
    <script src="./data/php-shop/base.js"></script>
    <script src="./data/php-shop/a3mall.js"></script>
    <script src="./data/php-shop/beikeshop.js"></script>
    <script src="./data/php-shop/crmeb.js"></script>
    <script src="./data/php-shop/niushop.js"></script>
    <script src="./data/php-shop/opencart.js"></script>
    <script src="./data/php-shop/shopwind.js"></script>
    <script src="./data/php-shop/shopxo.js"></script>
    <script src="./data/php-shop/telidy.js"></script>
    <script src="./data/php-shop/yiovo.js"></script>
    <script>
        const RootComponent = {
            data() {
                return {
                    version: '1.0.0',
                    products: [
                        { name: "参数" },
                        { name: 'a3mall' },
                        { name: 'beikeshop' },
                        { name: 'crmeb' },
                        { name: 'niushop' },
                        { name: 'opencart' },
                        { name: 'shopwind' },
                        { name: 'shopxo' },
                        { name: 'telidy' },
                        { name: 'yiovo' },
                    ],
                    checkList: [],
                    tableData: [],
                }
            },
            // methods
            methods: {
                loadData() {
                    // this.tableData = [
                    //     {
                    //         "参数": "名称",
                    //         "fastadmin": "fastadmin",
                    //         "buildadmin": "buildadmin",
                    //     },
                    //     {
                    //         "参数": "官网",
                    //         "fastadmin": "fastadmin.net",
                    //         "buildadmin": "buildadmin.com",
                    //     }
                    // ];
                    let keys = Object.keys(baseJSON);
                    console.log(keys);
                    let rows = [], row = {};
                    for (let k of keys) {
                        row = {}
                        for (let item of this.products) {
                            if (item.name == '参数') {
                                row[item.name] = k;
                            } else {
                                console.log(item.name, k, window[item.name]);
                                row[item.name] = window[item.name][k] ?? '';
                                if (row[item.name].includes('://')) {
                                    row[item.name] = '<a href="' + row[item.name] + '" target="_blank" title="' + row[item.name] + '">' + row[item.name] + '</a>';
                                }
                            }
                        }
                        rows.push(row)
                    }
                    this.tableData = rows;
                }
            },
            // created
            created() {
                this.loadData();
            }
        }
        var app = Vue.createApp(RootComponent);
        app.use(ElementPlus);
        app.mount('#app')
    </script>
</body>

</html>